---
title: Magic Card
date: 2023-07-02
description: A spotlight effect that follows your mouse cursor and highlights borders on hover.
author: nyxb
published: true
video: https://cdn.nyxbui.design/magic-card.mp4
---

<ComponentPreview name="magic-card-demo" />


### Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add magic-card
```

</TabsContent>

<TabsContent value="manual">

<Steps>

Copy and paste the following code into your project.

```text
components/ui/magic-card.tsx
```

<ComponentSource name="magic-card" />

</Steps>

</TabsContent>

</Tabs>

## Examples

### Radial Gradient border

<ComponentPreview name="magic-card-gradient" />

## Props

### MagicContainer

| Prop name | Type      | Default | Description                             |
| --------- | --------- | ------- | --------------------------------------- |
| children  | ReactNode | -       | The children to render                  |
| className | string    | -       | The className to apply to the container |

### MagicCard

| Prop name      | Type      | Default                | Description                        |
| -------------- | --------- | ---------------------- | ---------------------------------- |
| children       | ReactNode | -                      | The children to render             |
| className      | string    | -                      | The className to apply to the card |
| maskSize       | number    | 200                    | The size of the spotlight mask     |
| borderColor    | string    | rgba(120,119,198)      | The color of the border            |
| borderWidth    | number    | 1                      | The width of the border            |
| borderRadius   | number    | 16                     | The radius of the border           |
| spotlight      | boolean   | true                   | Whether to show the spotlight      |
| spotlightColor | string    | rgba(120,119,198,0.08) | The color of the spotlight         |
| isolated       | boolean   | true                   | Whether to isolate the card        |
| background     | string    | rgba(120,119,198, 0.2) | The background of the card         |

